<!--新增/编辑字典-->
<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    :title="title"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleClose"
    @closed="closedDialog"
  >
    <p slot="title">{{ title }}</p>

    <el-form
      ref="formData"
      class="base-pipeline-layout"
      :rules="formRules"
      :model="formData"
      label-width="100px"
    >
      <el-form-item :label="dataList.Superiors" prop="parentId">
        <BaseTreeSelect
          v-model="formData.parentId"
          :tree-data="dictTreeData"
          :placeholder="dataList.SelectSuperiors"
        />
      </el-form-item>
      <el-form-item :label="dataList.DictionaryEncoding" prop="dictCode">
        <el-input
          v-if="!readOnly"
          v-model="formData.dictCode"
          :placeholder="dataList.EnterDictionaryEncoding"
        />
        <p v-else class="relay-only-value">{{ formData.dictCode }}</p>
      </el-form-item>
      <el-form-item :label="dataList.DictionaryName" prop="name">
        <el-input
          v-if="!readOnly"
          v-model="formData.name"
          :placeholder="dataList.EnterdictionaryName"
        />
        <p v-else class="relay-only-value">{{ formData.name }}</p>
      </el-form-item>
      <el-form-item :label="dataList.EDictionaryName" prop="eName">
        <el-input
          v-if="!readOnly"
          v-model="formData.eName"
          :placeholder="dataList.EnterEdictionaryName"
        />
        <p v-else class="relay-only-value">{{ formData.eName }}</p>
      </el-form-item>
      <el-form-item :label="dataList.DataLevel" prop="dataLevel">
        <CommonConfigSelectShow
          v-if="!readOnly"
          ref="CommonConfigSelectShow"
          :select-item="formData.dataLevel"
          :show-type="{ key: 'DataLevel' }"
        ></CommonConfigSelectShow>
        <p v-else class="relay-only-value">{{ formData.dataLevel }}</p>
      </el-form-item>

      <el-form-item :label="dataList.DictionaryValue" prop="value">
        <el-input
          v-if="!readOnly"
          v-model="formData.value"
          :placeholder="dataList.EnterDictionaryValue"
          type="textarea"
          rows="8"
        />
        <p v-else class="relay-only-value">{{ formData.value }}</p>
      </el-form-item>

      <el-form-item :label="dataList.Description" prop="remark">
        <el-input
          v-model="formData.remark"
          :disabled="readOnly"
          type="textarea"
          rows="8"
          :placeholder="dataList.EnterDescription"
        ></el-input>
      </el-form-item>

      <el-form-item :label="dataList.Sort" prop="sort">
        <el-input
          v-if="!readOnly"
          v-model="formData.sort"
          :placeholder="dataList.Sort"
        />
        <p v-else class="relay-only-value">{{ formData.sort }}</p>
      </el-form-item>
    </el-form>

    <span slot="footer" class="base-dialog-footer">
      <el-button
        v-if="!readOnly"
        v-loading="submitLoad"
        :disabled="submitLoad"
        type="primary"
        @click="submitForm"
        >{{ btn.Save }}</el-button
      >
      <el-button @click="handleClose">
        {{ btn.Cancel }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  dictInfo,
  dicttUpdate,
  dictCreate,
  getDictTree,
} from "../../../api/System/SystemDict.js";

import { formatData } from "../../../utils/index";
import CommonConfigSelectShow from "../../../components/System/CommonConfigSelectShow.vue";

export default {
  name: "SystemDictDialog",
  components: { CommonConfigSelectShow },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [String, Number],
      default: "",
    },
    parentId: {
      type: [String, Number],
      default: "",
    },
    dictCode: {
      type: [String, String],
      default: "",
    },
  },
  data() {
    return {
      title: "",
      dialogVisible: false,
      submitLoad: false,
      formData: {
        dictCode: "",
        dataLevel: 0,
        sort: 0,
        name: "",
        eName: "",
        parentId: 0,
        value: "",
        remark: "",
      },
      formRules: {
        name: [
          {
            required: true,
            message: this.$t("ModuleSystem.System.EnterdictionaryName"),
          },
        ],
        value: [
          {
            required: true,
            message: this.$t("ModuleSystem.System.EnterDictionaryValue"),
          },
        ],
        parentId: [
          {
            required: true,
            message: this.$t("ModuleSystem.System.SelectSuperiors"),
          },
        ],
        dictCode: [
          {
            required: true,
            message: this.$t("ModuleSystem.System.EnterDictionaryEncoding"),
          },
        ],
      },
      dictTreeData: [],
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleSystem.buttons");
    },
    dataList() {
      return this.$t("ModuleSystem.System");
    },
  },
  watch: {
    value: function() {
      this.dialogVisible = this.value;
      if (this.value) {
        this.init();
      }
    },
  },
  created() {},
  methods: {
    // 初始化
    async init() {
      // 等待数据项请求会完成 防止无法默认选中
      await this.getOption();
      this.formData.parentId = this.parentId;
      // editId 存在表示编辑 不存在表示新增
      this.title = this.editId
        ? this.$t("ModuleSystem.buttons.Edit")
        : this.$t("ModuleSystem.buttons.Add");

      // 编辑 先获取信息
      if (this.editId) {
        // 获取信息
        dictInfo({ id: this.editId }).then((res) => {
          this.formData.sort = res.data.sort;
          this.formData.name = res.data.name;
          this.formData.eName = res.data.eName;
          this.formData.value = res.data.value;
          this.formData.dictCode = res.data.dictCode;
          this.formData.parentId = res.data.parentId;
          this.formData.dataLevel = res.data.dataLevel;
          this.formData.remark = res.data.remark;
        });
      } else if (this.dictCode) {
        var _Index = this.dictCode.indexOf("_");
        if (_Index > -1) {
          this.formData.dictCode = this.dictCode.substring(0, _Index - 1);
        }
      }
    },
    // 提交表单
    submitForm() {
      // 校验表单必填项
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 当前编辑ID是否存在 存在则去更新信息
          this.submitLoad = true;

          this.formData.dataLevel =
            this.$refs.CommonConfigSelectShow.currentSelectItem;

          if (this.editId) {
            this.editAPI(this.formData);
          } else {
            // 新增
            this.addAPI(this.formData);
          }
        } else {
          this.$message.error(this.$t("ModuleSystem.buttons.PleaseComplete"));
        }
      });
    },
    // 新增接口
    addAPI(data) {
      dictCreate(data)
        .then(() => {
          this.SuccessfulOperation();
        })
        .catch(() => {
          this.submitLoad = false;
        });
    },
    // 编辑接口
    editAPI(data) {
      dicttUpdate({
        ...data,
        id: this.editId,
      })
        .then(() => {
          this.SuccessfulOperation();
        })
        .catch(() => {
          this.submitLoad = false;
        });
    },
    // 操作成功回调用
    SuccessfulOperation() {
      this.submitLoad = false;
      // this.$message.success('操作成功');
      this.$emit("success");
      this.handleClose();
    },
    // 关闭弹框
    handleClose() {
      this.$emit("input", false);
    },
    // 关闭弹框动画结束
    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$refs.formData.resetFields();
    },
    // 获取下拉数据
    getOption() {
      return new Promise((resolve) => {
        getDictTree().then((res) => {
          let dictTreeData = res.data;
          dictTreeData = [
            {
              id: "0",
              name: this.$t("ModuleSystem.System.FirstLevelDictionary"),
            },
            ...dictTreeData,
          ];
          this.dictTreeData = formatData(dictTreeData);
          resolve();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dict-dialog {
  .el-dialog__body {
    padding: 40px 60px;
  }
  .relay-only-value {
    margin-bottom: 2px;
  }
}
</style>
